<template>
  <div class="main">
    <van-nav-bar title="全景视图" left-arrow @click-left="onClickLeft">
    </van-nav-bar>

    <div class="back"></div>
    <div class="top-box">
      <div class="tool-box">
        <div class="area-box" @click="showAreaPicker = true">
          <!-- <van-icon name="location" /> -->
          <img src="../../assets/pan-view/位置 (2).png" />
          <div>{{ area }}</div>
          <van-icon name="arrow-down" />
        </div>
        <div class="time-box" @click="showDatePicker = true">
          <!-- <van-icon name="location" /> -->
          <img src="../../assets/pan-view/riqi.png" />
          <div>{{ times }}</div>
        </div>
      </div>

      <div class="title">{{ title }}</div>

      <div class="change-box" @click="showPicker = true">
        <van-icon name="exchange" />
        <div>切换数据</div>
      </div>
    </div>

    <!-- 政企-->
    <div class="contents">
      <province-status :radarObj="radarObj" />
      <wellTrend :chartObj="wellChartObj" />
      <order :itemObj="itemObj" />
      <report :itemObj="reportObj" />
    </div>
    <!-- 切换数据 -->
    <chang-data
      :showPicker="showPicker"
      :sIndex="5"
      @hiddenPicker="hiddenPicker"
    ></chang-data>

    <!-- 切换地市 -->
    <van-popup v-model:show="showAreaPicker" round position="bottom">
      <van-picker
        :columns="areaData"
        :columns-field-names="areaFieldName"
        @cancel="showAreaPicker = false"
        @confirm="onAreaConfirm"
      />
    </van-popup>

    <!-- 切换日期 -->
    <van-popup v-model:show="showDatePicker" round position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="showDatePicker = false"
        @confirm="onDateConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import "@/api/index";
import { ref, reactive, toRefs, onMounted } from "vue";
import store from "@/store/index";
import { useRouter } from "vue-router";
import kpiIndex from "@/components/pan-view/kpi-index.vue";
import changData from "@/components/chang-data.vue";
import provinceStatus from "./components/province-status.vue";
import wellTrend from "./components/well-trend.vue";
import order from "./components/order.vue";
import report from "./components/report.vue";

import moment from "moment";
export default {
  components: {
    kpiIndex,
    changData,
    provinceStatus,
    wellTrend,
    order,
    report,
  },
  setup() {
    let state = reactive({
      showPicker: false,
      showDatePicker: false,
      showAreaPicker: false,
      area: "全省",
      areaData: [
        { areaName: "全省", areaId: "0001" },
        { areaName: "南京市", areaId: "0001" },
        { areaName: "扬州市", areaId: "0001" },
        { areaName: "泰州市", areaId: "0001" },
        { areaName: "苏州市", areaId: "0001" },
        { areaName: "常州市", areaId: "0001" },
      ],
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      times: moment().format("YYYYMM"),
      title: "政企",
      wellChartObj: {
        index1: 1,
        yAxisData: [],
        xAxisData: [],
        title: "综合满意度",
        lineColor: "#7C9FF5",
        areaClolor: "#7C9FF5",
      },
      itemObj: {
        city: "全省",
        value: "97.65",
        listData: [
          {
            city: "常州",
            value: "99.27",
          },
          {
            city: "徐州",
            value: "98.27",
          },
          {
            city: "宿迁",
            value: "97.27",
          },
          {
            city: "盐城",
            value: "96.27",
          },
          {
            city: "泰州",
            value: "95.27",
          },
        ],
      },
      radarObj: {
        title: "饼状图",
        names: ["专线", "物联网", "企宽", "IDC", "移动云"],
        values: ["98", "95", "97", "99", "99.4"],
      },
      reportObj: {
        titles: ["地市", "专线", "企宽", "移动云", "物联卡", "IDC"],
        areas: [
          ["南京", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["苏州", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["无锡", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["常州", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["南通", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["扬州", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["泰州", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["淮安", "98.28", "94.28", "95.28", "96.28", "99.28"],
          ["宿迁", "98.28", "94.28", "95.28", "96.28", "99.28"],
        ],
        colors: [
          {
            background: "#F3F3F3",
            color: "#333333",
          },
          {
            background: "rgba(255,153,0,0.06)",
            color: "#FF9900",
          },
          {
            background: "rgba(254,106,0,0.06)",
            color: "#FE6A00",
          },
          {
            background: "rgba(43,102,246,0.06)",
            color: "#2B66F6",
          },
          {
            background: "rgba(124,159,245,0.06)",
            color: "#7C9FF5",
          },
          {
            background: "rgba(16,207,165,0.06)",
            color: "#10CFA5",
          },
        ],
      },
    });

    const formatter = (type, val) => {
      if (type === "year") {
        return `${val}年`;
      }
      if (type === "month") {
        return `${val}月`;
      }
      return val;
    };
    const onClickLeft = () => history.back();
    function hiddenPicker(isShow) {
      state.showPicker = isShow;
    }
    const router = useRouter();
    const customFieldName = {
      text: "title",
    };
    const onConfirm = (value) => {
      console.log(value);
      state.showPicker = false;
      state.title = value.title;
      state.id = value.id;
    };

    const areaFieldName = {
      text: "areaName",
    };
    const onAreaConfirm = (value) => {
      console.log(value);
      state.showAreaPicker = false;
      state.area = value.areaName;
      state.id = value.id;
    };
    const onDateConfirm = (value) => {
      state.showDatePicker = false;
      state.times = moment(value).format("YYYYMM");
    };
    onMounted(() => {
      state.wellChartObj = {
        yAxisData: [113, 226, 330, 466],
        xAxisData: ["2022年第1期", "2022年第2期", "2022年第3期", "2022年第4期"],
        title: "综合满意度",
        lineColor: "#7C9FF5",
        areaClolor: "#7C9FF5",
      };
    });
    return {
      ...toRefs(state),
      onClickLeft,
      customFieldName,
      onConfirm,
      areaFieldName,
      onAreaConfirm,
      formatter,
      onDateConfirm,
      hiddenPicker,
    };
  },
};
</script>

<style scoped lang="scss">
.main {
  // background: url("../../assets/pan-view/bg_TOP.png") no-repeat 0 0;
  background-size: 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;

  .back {
    position: absolute;
    left: 0px;
    top: 0px;
    background: url("../../assets/pan-view/bg_TOP.png") no-repeat 0 0;
    background-size: 100% 100%;
    width: 100%;
    height: 212px;
    z-index: -1;
  }

  .top-box {
    width: 100%;
    height: 100px;

    .tool-box {
      margin: 10px;
      width: calc(100% - 20px);
      height: 30px;
      display: flex;
      justify-content: space-between;

      .area-box {
        background: rgba(241, 104, 0, 0.6);
        width: 94px;
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #ffffff;
        font-size: 12px;
        border-radius: 5px;

        img {
          height: 14px;
          width: 14px;
        }
      }

      .time-box {
        background: rgba(255, 255, 255, 1);
        width: 84px;
        height: 30px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: black;
        font-size: 12px;
        border-radius: 5px;

        img {
          height: 14px;
          width: 14px;
        }
      }
    }

    .title {
      font-size: 24px;
      margin: 10px;
      color: #ffffff;
    }
    .change-box {
      margin: 10px;
      background: #ffffff;
      width: 84px;
      height: 25px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      color: #ff9900;
      font-size: 12px;
      border-radius: 12.5px;
    }
  }

  .contents {
    margin-top: 10px;
    width: 100%;
    height: calc(100% - 154px);
    padding-bottom: 10px;
    overflow: auto;
  }
}

::v-deep .van-nav-bar {
  background: transparent !important;
}
::v-deep .van-nav-bar .van-icon {
  color: #ffffff !important;
}

::v-deep .van-nav-bar__title {
  color: #ffffff !important;
}
</style>
